<template>
	<view class="template-home" style="background-color: #f1f1f1;">

		<!-- 顶部占位 -->
		<view class="faceBanner" :style="'height:' + sConf.tH + 'px;'"> </view>
		<!-- 头像栏 -->
		<view v-if="isLogin" class="faceBanner" style="width: 100%;padding: 40px 20px 100px 20px;border-bottom-left-radius: 200rpx 30rpx;
		border-bottom-right-radius: 200rpx 30rpx; ">
			<sub-staff-card v-if="tmpData" :data="tmpData" :isDesc="false" fsize="larger" asize="xl" qrcode 
				@showQrCode="showQrCodeNew"></sub-staff-card>
		</view>
		<view v-else class="faceBanner" style="width: 100%;padding: 40px 20px;border-bottom-left-radius: 200rpx 30rpx;
		border-bottom-right-radius: 200rpx 30rpx; ">
			<view style="display: flex;gap: 20px;align-items: center;">
				<tn-avatar :url="sConf.pics + '/media/default/default_0.png'" size="xl" @click="onLogin" />
				<view style="color: #f1f1f1;font-size: large;">点击头像登录</view>
			</view>
		</view>

		<!-- 钱包栏 -->
		<view v-if="isLogin" style="padding: 0 30px;display: block;position: relative; top:-70px;margin-bottom: -70px;">
			<view v-if="tmpData && tmpData.isVip" class="tb-shadow tn-gradient-bg__cool-5"
				style="margin-left: auto;margin-right: auto;border-radius: 10px;display: flex;flex-direction: column;padding: 10px;">

				<view style="display: flex;gap: 10px;align-items: center;padding: 5px 10px;">
					<view style="font-size: smaller;color: #fff;">钱包余额(元)</view>
					<tn-icon name="eye" color="#fff"></tn-icon>
				</view>
				<view
					style="display: flex;justify-content: space-between; align-items: center;padding: 0 10px 10px 10px;">
					<view style="color: #fff;font-size: x-large;font-weight: bold;">
						{{ (tmpData?.wallet.amount / 100 || 0).toFixed(2) }}
					</view>
					<tn-icon name="right" color="#fff" @tap="navWallet"></tn-icon>
				</view>
				<view class=""
					style="padding: 5px 10px;color: #fff; font-size: small;display: flex;justify-content: space-between;">
					<view style="display: flex;gap: 10px;">
						<text>待结算</text>
						<text>{{(tmpData.sub_waitwallet.allPlace / 100).toFixed(2)}}</text>
					</view>
					<view class="" @click="hasMoneyChange"> 立即提现 </view>
				</view>
				<view
					style="border-top: 1px solid #f1f1f1;display: flex;justify-content: space-between;align-items: flex-start;padding: 5px 10px;">
					<view style="display: flex;flex-direction: column;align-items: flex-start;color: #fff;"
						@tap="navPoints">
						<view style="font-size: smaller;">积分</view>
						<view style="font-weight: bold;">{{ zipPoint(tmpData.points.amount) }}</view>
					</view>
					<view style="display: flex;flex-direction: column;align-items: flex-start;color: #fff;"
						@tap="navMaster">
						<view style="font-size: smaller;">红包</view>
						<view style="font-weight: bold;">{{ (tmpData.master.amount / 100).toFixed(2) }}</view>
					</view>
					<view style="display: flex;flex-direction: column;align-items: flex-start;color: #fff;"
						@tap="navCardChange">
						<view style="font-size: smaller;">卡券</view>
						<view style="font-weight: bold;">{{ tmpData.cards }}</view>
					</view>
				</view>

				<!-- 下拉更多信息
				<tn-icon class="textArrow" name="down" size="32" color="#aaa"
					@tap="()=>{this.isMore = !this.isMore}"></tn-icon>
				-->

				<view v-if="isMore" class="item-container"
					style="padding-top: 10px;display: flex;align-items: center;gap: 5px; border-radius: 10px;">
					<tn-bubble-box :options="[{ text: tmpData.curLevel.name }]">
						<tn-icon :name="tmpData.curLevel.icon" size="48" :color="tmpData.curLevel.color"></tn-icon>
					</tn-bubble-box>
					<tn-line-progress
						:percent="scaleRate(tmpData.expers.amount ?? 0, filterLevelData(tmpData.expers.level + 1)?.money ?? 0)"
						height="25" stripe style="flex: 1;"></tn-line-progress>
					<tn-bubble-box :options="[{ text: tmpData.nextLevel.name }]">
						<tn-icon :name="tmpData.nextLevel.icon ?? 'vip'" size="48"
							:color="tmpData.nextLevel.color ?? '#000'"></tn-icon>
					</tn-bubble-box>
				</view>
			</view>
			<view v-else class="tb-shadow tn-gradient-bg__grey-light"
				style="margin-left: auto;margin-right: auto;border-radius: 10px;display: flex;justify-content: space-around;align-items: center; padding: 20px 10px;">
				<view style="font-size: small;color: #ff7e5f;">升级会员尊享更多权限，提升更多收益</view>
				<view class="tn-gradient-bg__orange"
					style="padding: 10px 20px;color: #fff;font-size: small;border-radius: 5px;" @click="levelChange">去升级
					></view>
			</view>
		</view>
		<view v-else></view>
		<!-- 正文 -->
		<view class="personSlBlock">
			<scroll-view scroll-y enable-back-to-top :scroll-top="toTop" :refresher-enabled="loadingTop"
				:style="'height:' + topH + 'px;'" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort">
				<view style="display: flex;flex-direction: column;">
					<!-- 订单栏 -->
					<view style="padding: 15px 15px 5px 15px;">
						<view style="background-color: #fff;padding: 20px;border-radius: 10px;">
							<view style="display: flex;justify-content: space-between;align-items: end;">
								<text style="font-weight: bold;">我的订单</text>
								<text @tap="stateChange(-1)">所有订单 ></text>
							</view>
							<view class="item-container" style="padding-top: 10px;">
								<view v-for="(order, index) in orderType" :key="index" @tap="stateChange(order.status)"
									class="scroll-item tn-flex-center tn-flex-column">
									<tn-icon :name="order.icon" :size="80"></tn-icon>
									<view class="title">{{ order.name }}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 功能栏 -->
					<view style="padding: 15px;">
						<view style="background-color: #fff;border-radius: 10px 5px;">

							<tn-list-item right-icon="right" radius bottom-border @click="signChange">
								<tn-icon name="fingerprint" :size="32" style="padding-right: 5px;"></tn-icon>每日签到
							</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="levelChange">
								<tn-icon name="vip-diamond" :size="32" style="padding-right: 5px;"></tn-icon>会员权益
							</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="userinfoChange">
								<tn-icon name="my" :size="32" style="padding-right: 5px;"></tn-icon>个人设置 </tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="memberChange">
								<tn-icon name="share-triangle" :size="32"
									style="padding-right: 5px;"></tn-icon>团队成员</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="favorChange">
								<tn-icon name="like" :size="32"
									style="padding-right: 5px;"></tn-icon>我的收藏</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="addressChange">
								<tn-icon name="address" :size="32"
									style="padding-right: 5px;"></tn-icon>收货地址</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="myShopChange">
								<tn-icon name="shop" :size="32"
									style="padding-right: 5px;"></tn-icon>商铺管理</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="myBankChange">
								<tn-icon name="bankcard" :size="32"
									style="padding-right: 5px;"></tn-icon>银行卡</tn-list-item>
							<!--		
							<tn-list-item right-icon="right" radius bottom-border @click="doService">
								<tn-icon name="service-simple" :size="32"
									style="padding-right: 5px;"></tn-icon>客服咨询</tn-list-item>
							-->
							<tn-list-item right-icon="right" radius bottom-border @click="showAuthorize">
								<tn-icon name="notebook" :size="32"
									style="padding-right: 5px;"></tn-icon>用户协议</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="showWxchat">
								<tn-icon name="qr-code-circle" :size="32"
									style="padding-right: 5px;"></tn-icon>关注公众号</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="showVersion">
								<tn-icon name="facebook" :size="32"
									style="padding-right: 5px;"></tn-icon>FAQ</tn-list-item>
							<tn-list-item right-icon="right" radius bottom-border @click="logout">
								<tn-icon name="logout" :size="32"
									style="padding-right: 5px;"></tn-icon>退出登录</tn-list-item>
						</view>
					</view>

					<!-- 客服 -->
					<view style="padding: 15px;">
						<button type="default" open-type="contact"
							style="background-color: #000;color: #fff;border-radius: 5px;">在线客服</button>
					</view>

					<!-- 注销 
					<view style="padding: 15px;">
						<button type="default" style="background-color: #000;color: #fff;border-radius: 5px;"
							@tap="logout">注销</button>
					</view>
					-->

					<!-- 安全距离 
					<view style="padding: 15px;">
						<button :disabled="true" type="default"
							style="background-color: #000;color: #fff;border-radius: 5px;" @tap="logout">底线</button>
					</view>
					-->

					<!-- 底部安全栏 -->
					<view style="height: 120px;"></view>
				</view>
			</scroll-view>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :safe-area-inset-right="true" :placeholder="true" back-icon="" home-icon="" fixed
			bg-color="#FFFFFF00" text-color="#fff">
			<text class="gl-title">{{ sConf.title }}{{ title }}</text>
			<template #back>
				<tn-icon :name="sConf.logo" size='64' color="#fff" style="margin-left: 5px;"></tn-icon>
			</template>
		</tn-navbar>



		<!-- 模态窗口 -->
		<tn-notify ref="popNotify" />
		<!-- 个人码画布 -->
		<tn-popup v-model="showCanvas">
			<canvas type="2d" id="myCanvas" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>
			<view style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
				<view class=""></view>
				<view style="display: flex;justify-content: space-around;width: 100%;padding: 15px 0;">
					<button class="gl-button-base" hover-class="gl-button-base-hover"
						style="display: flex;align-items: center;gap: 5px;" @tap="saveQrCode">
						<tn-icon name="download-simple" color="#fff" size="32"></tn-icon>
						<text style="font-size: small;">保存到相册</text></button>
					<button class="gl-button-base" hover-class="gl-button-base-hover" open-type="share"
						:data-obj="tmpData" style="display: flex;align-items: center;gap: 5px;">
						<tn-icon name="share" color="#fff" size="32"></tn-icon>
						<text style="font-size: small;">分享到微信</text></button>
				</view>
			</view>


		</tn-popup>
		<!-- 显示版本-->
		<tn-popup v-model="showVer">
			<view v-if="verData" class="tn-p-lg" style="display: flex;flex-direction: column;gap: 20px;">
				<view> {{ sConf.ver }} </view>
				<view>{{ sConf.stamp }}</view>
			</view>
		</tn-popup>
		<!-- 云店列表 -->
		<tn-popup v-model="showPlace"> <sub-shoped-list ref="listPlace"></sub-shoped-list> </tn-popup>
		<!-- 用户协议 -->
		<tn-popup v-model="authorize" open-direction="top" :overlay-closeable="false">
			<scroll-view scroll-y style="width: 100%;height: 70vh;padding: 10px;">
				<view style="width: 100%; ">
					<!-- <web-view :src="sConf.pics + '/media/docs/yhxy.md'"></web-view> -->
					<view :style="'height:' + sConf.tH + 'px;'"> </view>
					<rich-text :nodes="strings" style="width: 100%;"></rich-text>
					<button style="background-color: #000;color: #fff;margin-top: 20px;" @click="aggree">接受协议</button>
				</view>
			</scroll-view>
		</tn-popup>
		<!-- 公众号 -->
		<tn-popup v-model="showChat">
			<view style="padding: 10px;display: flex;flex-direction: column;align-items: center;gap: 20px;">
				<image src="/static/wechat.jpg" mode="widthFix" style="width: 400px;height: 400px;"></image>
				<view class="">悦君荟 雕刻时光CLUB</view>
			</view>
		</tn-popup>
		<!-- 升级会员 -->
		<tn-popup v-model="showBuyVip" open-direction="top">
			<sub-vip-buy ref="subVipBuy"></sub-vip-buy>
		</tn-popup>

		<personVerifyPopVue ref="personVerifyPop" @reload="onLogined"></personVerifyPopVue>
		<personRegeditPopVue ref="personRegeditPop" @reload="onLogined"></personRegeditPopVue>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	import saveImage from '@/common/saveImage';
	import psMethod from '@/common/psMethod';
	import personVerifyPopVue from '../person-verify-pop/person-verify-pop.vue';
	import personRegeditPopVue from '../person-regedit-pop/person-regedit-pop.vue';
	export default {
		name: "person",
		data() {
			return {
				topH: 0,
				title: '个人中心',
				sConf: getApp().globalData,
				verData: null, // 版本数据
				tmpData: null, // 基础个人信息
				levelData: [], // 等级列表
				showVer: false,
				authorize: false,
				showChat: false,
				showQrCodePopup: false, // 显示个人码
				showBuyVip: false, // 显示升级会员
				qrCodeSrc: null,
				toTop: 0, // 下拉刷新
				loadingTop: true, // 下拉刷新
				triggered: false, // 下拉刷新
				strings: null,
				orderType: [{
					status: 0,
					name: '待付款',
					icon: 'pay'
				}, {
					status: 1,
					name: '待发货',
					icon: 'receipt'
				}, {
					status: 2,
					name: '待收货',
					icon: 'logistics'
				}, {
					status: 3,
					name: '已收货',
					icon: 'prize'
				}],
				// 云店参数
				showPlace: false,
				isMore: false,
				// 截图画布参数
				canvasWidth: 380,
				canvasHeight: 590,
				showCanvas: false,

				// // 注册部分
				// showVerify: false,
				// agent: false,
				// showSecret: false,
				// avatarUrl: 'https://cos.yuejunxi.com/media/default/default_0.png',
				// avatarNam: '新用户',

				isLogin: false, // 是否登录
			};
		},
		mounted() {
			console.log('mounted', '444444444444444');
		},
		components: {
			personRegeditPopVue,
			personVerifyPopVue
		},
		methods: {
			onLogin() {
				console.log('onLogin');				
				this.$refs.personRegeditPop.open()
			},
			/**
			 * 隐私字段
			 * @param {String} e
			 */
			zipStr(e) {
				// console.log('zipStr', e);
				return utils.zipStr(e);
			},
			onRefresh() {
				console.log('下拉刷新_触发', this.toTop);
				this.triggered = true
				this.$nextTick(() => {
					// this.loadLevelList()
					this.loadUserinfoData(this.sConf.auth.id);
					this.triggered = false
				})
			},
			onRestore() {
				console.log('下拉刷新_复位');
				this.triggered = false
			},
			onAbort() {
				console.log('下拉刷新_终止');
				this.triggered = false
			},
			onLogined() {
				this.isLogin = psMethod.isLogined(this.sConf.run);
				console.log('检查登录状态->', this.sConf.auth, this.isLogin);
				if (this.isLogin && (this.sConf.auth.nicename === '新用户' || this.sConf.auth.face.includes('default/default'))) {
					this.$refs.personVerifyPop.open()
				}
			},
			async loadDefData() {
				console.log('init person');
				let res = await this.loadUserinfoData(this.sConf.auth.id);
				console.log('更新个人信息->', res);
				this.onLogined()
				this.designLayout()

			},
			designLayout() {
				console.log('计算窗口布局');
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.personSlBlock').boundingClientRect();
					query.exec((res) => {
						this.topH = this.sConf.iH - res[0].top - 100;
					});
				})
			},
			/**
			 * 加载个人信息
			 */
			loadUserinfoData(e) {
				let host = this.sConf.host + '/weapps/userinfo/' + e + '/';
				let token = this.sConf.token || '';
				utils.authenticatorOnRead(host, token).then((res) => {
					console.log('加载个人信息', res);
					this.tmpData = res;
				})
			},
			/**
			 * 加载图像
			 */
			getImageInfo(e) {
				return new Promise((req, rej) => {
					console.log('下载图像', e);
					uni.getImageInfo({
						src: e,
						success(r) {
							console.log('下载成功', r);
							req(r)
						},
						fail(e) {
							console.log('下载异常', e);
							rej(e)
						}
					})
				})
			},
			/**
			 * 加载个人码
			 */
			getQrCode() {
				let that = this
				return new Promise((req, rej) => {
					let host = that.sConf.host + '/weapps/myQrCode/';
					let token = that.sConf.token || '';
					let data = {
						staff: that.sConf.auth.id
					}
					utils.authenticatorOnPost(host, token, data).then((res) => {
						console.log('我的推广码', res);
						req(res)
					}).catch(e => {
						rej(e)
					})
				})
			},
			// /**
			//  * 显示个人码
			//  * @param {Object} e
			//  */
			// showQrCode() {
			// 	console.log('showQrCode');

			// 	if (this.tmpData.qrcode) {
			// 		this.showQrCodePopup = !this.showQrCodePopup
			// 		return;
			// 	}

			// 	let host = this.sConf.host + '/weapps/myQrCode/';
			// 	let token = this.sConf.token || '';
			// 	let data = {
			// 		staff: this.sConf.auth.id
			// 	}
			// 	utils.authenticatorOnPost(host, token, data).then((res) => {
			// 		console.log('我的推广码', res);
			// 		this.tmpData.qrcode = res;
			// 		this.showQrCodePopup = !this.showQrCodePopup
			// 	})
			// },

			/**
			 * 显示个人码——新
			 */
			showQrCodeNew() {
				console.log('showQrCodeNew');
				if (!Boolean(this.tmpData.qrcode)) {
					this.getQrCode().then(qrCode => {
						console.log('加载个人码', qrCode);
						this.tmpData.qrcode = qrCode;
					})
				}
				uni.navigateTo({
					url: '/pagec/name-card/name-card?code=' + this.tmpData.qrcode + '&name=' + this.tmpData
						.nicename
				})
				// 防止真机SSL报错
				// let cos = 'https://media-1335096253.cos.ap-chengdu.myqcloud.com';

				// this.showCanvas = !this.showCanvas


				// let that = this
				// wx.createSelectorQuery().select('#myCanvas').node(({
				// 	node: canvas
				// }) => {
				// 	const ctx = canvas.getContext('2d')
				// 	canvas.width = that.canvasWidth
				// 	canvas.height = that.canvasHeight

				// 	that.getImageInfo(cos + '/media/default/1_qrcode.jpg')
				// 		.then(res => {
				// 			console.log('加载背景', res);
				// 			if (res.errMsg === "getImageInfo:ok") {
				// 				let bg = canvas.createImage()
				// 				bg.src = res.path
				// 				bg.onload = () => {
				// 					ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)
				// 					ctx.save()
				// 					// 加载文本
				// 					ctx.font = '32px SimSun'
				// 					ctx.fillStyle = '#333333'
				// 					ctx.fillText(that.tmpData.nicename, 35, 440, 180)
				// 					console.log('绘制昵称');
				// 					if (this.sConf.run !== 'release') {
				// 						ctx.font = '16px SimSun'
				// 						ctx.fillText('体验版', 260, 460)
				// 						console.log('体验版');
				// 					}
				// 				}
				// 			}
				// 		})

				// 	that.getImageInfo(cos + that.tmpData.qrcode)
				// 		.then(res => {
				// 			console.log('加载二维码', res);
				// 			if (res.errMsg === "getImageInfo:ok") {
				// 				let code = canvas.createImage()
				// 				code.src = res.path
				// 				code.onload = () => {
				// 					// QrCode中心位置
				// 					let cx = 280
				// 					let cy = 350

				// 					// 裁剪背景区域
				// 					ctx.beginPath()
				// 					ctx.arc(cx, cy, 84, 0, Math.PI * 2, false)
				// 					ctx.closePath()
				// 					ctx.clip()

				// 					// 背景填充				
				// 					ctx.fillStyle = '#ffffff'
				// 					ctx.fillRect(cx - 84, cy - 84, 168, 168)
				// 					ctx.save()
				// 					console.log('绘制二维码背景');


				// 					// QrCoded填充
				// 					ctx.drawImage(code, cx - 64, cy - 64, 128, 128)
				// 					ctx.save()
				// 					console.log('绘制二维码');

				// 					// 边框填充			
				// 					ctx.beginPath()
				// 					ctx.arc(cx, cy, 74, 0, Math.PI * 2, false)
				// 					ctx.strokeStyle = "#b58d63"
				// 					ctx.lineWidth = 3
				// 					ctx.closePath()
				// 					ctx.stroke()
				// 					ctx.save()
				// 					console.log('绘制二维码边框');

				// 				}
				// 			}
				// 		})
				// }).exec()

			},
			// /**
			//  * 保存个人码
			//  */
			// downloadImage() {
			// 	let url = 'https://media-1335096253.cos.ap-chengdu.myqcloud.com' + this.tmpData.qrcode;
			// 	// let url = this.sConf.pics + this.tmpData.qrcode;
			// 	saveImage.saveImageToPhoto(url).then(res => {
			// 		console.log('保存图片__成功');
			// 		uni.showToast({
			// 			title: '保存成功'
			// 		})
			// 	}).catch(err => {
			// 		console.log('保存图片__失败', err);
			// 		uni.showToast({
			// 			icon: 'error',
			// 			title: '保存失败'
			// 		})
			// 	})
			// },
			/**
			 * 新的保存个人码
			 */
			async saveQrCode() {
				console.log('saveQrCode');
				let auth = await saveImage.hasAuthSetting()
				console.log('检测权限->', auth);
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success(r) {
						uni.saveImageToPhotosAlbum({
							filePath: r.tempFilePath,
							success() {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									title: '保存失败'
								})
							}
						})
					},
					fail(e) {
						console.error(e);
					}
				}, this)
			},
			/**
			 * 向上取整
			 * @param {Number} n 分子 
			 * @param {Number} m 分母
			 */
			scaleRate(n, m) {
				return Math.ceil((n / m) * 100)
			},
			/**
			 * 过滤等级
			 * @param {Object} e
			 */
			filterLevelData(e) {
				// console.log('检索数据');
				return this.levelData.find(item => item.level === e)
			},
			/**
			 * 查询订单状态改变
			 */
			stateChange(e) {
				console.log('stateChange', e);
				uni.navigateTo({
					url: '/pageb/reqsn/reqsn?state=' + e
				});
			},
			/**
			 * 查看会员信息
			 */
			vipChange() {
				uni.navigateTo({
					url: '/pagec/member/member'
				})
			},
			/**
			 * 每日签到
			 */
			signChange() {
				uni.navigateTo({
					url: '/pageb/daily/daily'
				})
			},
			/**
			 * 查看权益
			 */
			levelChange() {
				uni.navigateTo({
					url: '/pagec/member/level'
				})
			},
			/**
			 * 编辑个人信息
			 */
			userinfoChange() {
				this.$refs.personVerifyPop.open()
				// uni.navigateTo({
				// 	url: '/pageb/userinfo/userinfo'
				// })
			},
			/**
			 * 个人收藏夹
			 */
			favorChange() {
				uni.navigateTo({
					url: '/pageb/userinfo/favor'
				})
			},
			/**
			 * 团队成员
			 */
			memberChange() {
				uni.navigateTo({
					url: '/pagec/group/group'
				})
			},
			/**
			 * 收货地址
			 */
			addressChange() {
				uni.navigateTo({
					url: '/pageb/userinfo/address'
				})
			},
			/**
			 * 跳转到钱包
			 */
			navWallet() {
				uni.navigateTo({
					url: '/pageb/userinfo/master?state=0'
				})
			},
			/**
			 * 跳转到积分
			 */
			navPoints() {
				uni.navigateTo({
					url: '/pageb/userinfo/master?state=1'
				})
			},
			navMaster() {
				console.log('navMaster');
				uni.navigateTo({
					url: '/pageb/userinfo/master?state=2'
				})
			},
			/**
			 * 跳转经验
			 */
			navExpers() {
				uni.navigateTo({
					url: '/pageb/userinfo/expers'
				})
			},
			/**
			 * 跳转到成长
			 */
			growthChange() {
				uni.navigateTo({
					url: '/pageb/userinfo/growth'
				})
			},
			navCardChange() {
				console.log('跳转到我的卡券');
				uni.navigateTo({
					url: '/pagec/member/card'
				})
			},
			/**
			 * 跳转到小店
			 */
			myShopChange() {
				this.showPlace = !this.showPlace;
				this.$refs.listPlace.loadDefData();
			},
			/**
			 * 跳转到银行卡
			 */
			myBankChange() {
				uni.navigateTo({
					url: '/pagec/mybank/mybank'
				})
			},
			/**
			 * 跳转到提现
			 */
			hasMoneyChange() {
				uni.navigateTo({
					url: '/pagec/has-money/has-money'
				})
			},
			/**
			 * 客服接口
			 */
			doService(e) {
				console.log('客服接口');
				let u = 'https://work.weixin.qq.com/kfid/kfc1adc243dd2cbfabd'; // 公司客服
				// let u = 'https://work.weixin.qq.com/kfid/kfc9fcac555bb7b916f'; // 客服-01				
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: u
					},
					corpId: 'ww4478412db98bfd55',
					success(res) {
						console.log('拉起微信客服成功', res);
					},
					fail(e) {
						console.log('拉起微信客服失败', e);
						uni.showToast({
							title: e.errMsg
						})
					}
				});
				// #endif
			},
			/**
			 * 用户协议
			 */
			showAuthorize() {
				let host = this.sConf.host + '/api/doc/';
				utils.allinpayMethodList(host, {}).then((res) => {
					// console.log('用户协议', res);
					this.strings = res
					this.authorize = !this.authorize
				})
			},
			aggree() {
				this.authorize = false
			},
			showWxchat() {
				this.showChat = !this.showChat
			},
			/**
			 * 显示版本
			 */
			showVersion() {
				let account = uni.getAccountInfoSync();
				this.verData = account;
				this.showVer = !this.showVer;
				// console.log(account.miniProgram.envVersion, account.miniProgram.version);
			},
			waitLoadDev() {
				uni.showToast({
					icon: 'loading',
					title: '模块开发中'
				})
			},
			/**
			 * 注销
			 */
			logout() {
				console.log('注销');
				try {
					this.sConf.auth = null
					this.sConf.token = null
					uni.clearStorageSync()
				} catch (e) {
					console.log('同步清理本地数据缓存', e);
				} finally {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
			zipPoint(e) {
				return utils.zipPoint(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 头部样式 */
	.faceBanner {
		background-color: #444444;
	}

	/* 底部安全边距 start
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}
	*/
	.tn-tabbar-height {
		height: 100px;
	}

	/* 用户等级图标 */
	.flashing-light {
		// position: absolute;
		// top: 12px;
		// right: 12px;
		background-color: #ffaa00;
		/* 红色背景 */
		border-radius: 50%;
		/* 圆形 */
		overflow: hidden;
	}

	.flashing-light::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: white;
		opacity: 0;
		border-radius: 50%;
		animation: flash 1s infinite;
	}

	@keyframes flash {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 0.8;
		}

		100% {
			opacity: 0;
		}
	}

	/* 钱包卡片 */
	/* 阴影 */
	.tb-shadow {
		box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.3), -2px -2px 20px 1px rgba(0, 0, 0, 0.3);
	}

	.wallet-card {
		background: linear-gradient(135deg, #4facfe, #00f2fe);
	}

	/* 订单图标 */
	.item-container {
		// position: relative;
		// width: fit-content;

		width: 100%;

		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;

		.scroll-item {
			flex-grow: 1;
			flex-shrink: 0;
			margin: 0rpx 20rpx;

			.empty {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
			}

			.title {
				margin-top: 10rpx;
			}
		}
	}


	.textArrow {
		position: absolute;
		bottom: 0;
		left: calc(100vw / 2 - 16px);
	}

	/* 个人码背景 */
	.bgQrcode {
		width: 100vw;
		height: calc(100vw / 65 * 100);
		background-image: url('https://cos.yuejunxi.com/media/default/qrcode.png');
		background-size: 100% 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.bgQrcode-image {
			position: absolute;
			right: 50rpx;
			top: calc(100vw / 65 * 100 * 0.5);
		}

		.bgQrcode-title {
			position: absolute;
			left: 80rpx;
			top: calc(100vw / 65 * 100 * 0.7);
			font-weight: bold;
			font-size: xx-large;
			color: #000;
		}

	}
</style>